<template>
	<div class="user">
		<!-- 顶部 -->
		<van-nav-bar
			title="个人中心"
			left-text="返回"
			right-text="切换用户"
			left-arrow
			@click-left="onClickLeft"
			@click-right="onClickRight"
		/>
		<!-- 用户信息 -->
		<van-skeleton
			title
			avatar
			:row="3"
			:loading="loading"
			style="height: 100vh"
		>
			<div class="personage">
				<img src="../images/handPhoto.jpeg" alt="" />
				<div>
					<h3>{{$data.personal.nickName}}</h3>
					<p>{{$data.personal.avatar}}</p>
				</div>
			</div>
		</van-skeleton>
		<!-- 中心功能 -->
		<van-cell-group>
			<van-cell title="我的收藏" value="内容" is-link />
			<van-cell title="我的订单"  is-link @click="onOder"/>
			<van-cell title="个人信息"  is-link @click="onPersonal" />
			<van-cell title="修改密码" is-link @click="onChange"/>
			<van-cell title="系统设置" value="内容" is-link />
			<van-cell title="我的地址" is-link @click="onAddress" />
			<van-button type="primary" size="large" @click="logOut"
				>退出登录</van-button
			>
		</van-cell-group>
	</div>
</template>

<script>
import{userInfoAPL} from "../services/anth"

export default {
	data() {
		return {
			loading: true,
      info:{},
      personal:{},
		};
	},
  async created(){
    const res=await userInfoAPL();
    this.personal=res.data;
  },

	methods: {
		//退回
		onClickLeft() {
			this.$router.go(-1);
		},
		//跳登录页
		onClickRight() {
			this.$router.push({
				name: "Login",
			});
		},
		//退出登录
		logOut() {
			sessionStorage.setItem("token", "");
			this.$router.replace({
				name: "Home",
			});
		},
		//跳地址
		onAddress() {
			this.$router.push({
				name: "Address",
			});
		},
    //跳订单
    onOder(){
      this.$router.push({
        name:"Order"
      })
    },
    //跳个人信息
    onPersonal(){
      this.$router.push({
        name:"Personal",
        
      })
    },
    //跳修改密码
    onChange(){
      this.$router.push({
        name:"Change",
        
      })
    }
	},

	mounted() {
		const asd = Boolean(sessionStorage.getItem("token"));
		this.loading = !asd; //判断是否登录
	},
};
</script>

<style lang="scss">
.personage {
	// height: 20vh;
	overflow: hidden;
	img {
		width: 110px;
		margin: 20px;
		border-radius: 50%;
		float: left;
	}
	div > p {
		padding-right: 20px;
		height: 70px;
	}
}
</style>
